<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            width: 300px;
            height: 200px;
            background-color: aquamarine;
            font-size: x-large;
        }

        .div2 {
            width: 600px;
            height: 200px;
            background-color: rgb(230, 73, 25);
            border-right: 3px solid black;
            /*保留之前字体大小  不写font-size: xx-small; */
        }

        .div3 {
            width: 100px;
            height: 100px;
            background-color: aqua;
            border: 5px solid black;
        }

        .zhuce {
            margin: 0 auto;
            width: 300px;
            height: 220px;
            background-color: antiquewhite;
        }

        input {
            width: 250px;
            height: 30px;
            margin-bottom: 20px;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="div1">
        123
        <div class="div3"><a
                href="https://www.bilibili.com/video/BV1Sy4y1C7ha?p=212&vd_source=480c28921b1b6c12cb33e4a6f0a94947">学习视频链接</a>
        </div>
    </div>
    <!-- 注册页面 -->
    <div class="zhuce">
        姓名： <input class="names" type="text" value="请输入姓名"><br>
        密码：<span>显示/关闭密码</span><input class="pwd" type="text" value="请输入密码" style="margin-bottom: 0;">
        <p>请输入6-8位密码</p>
        <button>登陆</button>
    </div>
    <script>
        let div = document.querySelector('div');
        let div3 = document.querySelector('.div3');
        div.onclick = function () {
            //多个类名共同使用
            div.className = "div1 div2";
            //隐藏
            div3.style.display = 'none';
        }
        //注册表单
        let text = document.querySelector('.names');
        //获得焦点操作
        text.onfocus = function () {
            if (this.value === '请输入姓名') {
                //text.style.display = 'none';
                this.value = '';
            }
        }
        //失去焦点操作
        text.onblur = function () {
            if (this.value === '') {
                this.value = '请输入姓名';
            }
        }
        //密码框
        let pwd = document.querySelector('.pwd');

        pwd.onfocus = function () {
            if (this.value === '请输入密码') {
                this.value = '';
            }
        }
        pwd.onblur = function () {
            if (this.value === '') {
                this.value = '请输入密码';
            }

        }
        let p = document.querySelector('p');
        pwd.onblur = function () {
            if (this.value.length > 8 || this.value.length < 6) {
                p.innerHTML = '密码格式错误';
            }
        }
        let span = document.querySelector('span');
        //密码可视切换
        let t = 0;
        span.onclick = function () {
            if (t == 0) {
                pwd.type = 'text';
                t = 1;
            } else {
                pwd.type = 'password';
                t = 0;
            }
        }
    </script>

</body>

</html>